<template>
    <div class="side-menu">
        <div class="side">    
            <router-link to='/userhome'>
                <img src="../assets/image/user.png"/>
                <div class="img-right">
                    <p class="username">{{loginname}}</p>
                    <p class="money"><span>{{score}}</span> 积分</p>
                </div>
            </router-link>        
            
            <div class="clear"></div>
            <ul>
                <router-link tag="li" v-for="l in list" :to="l.uri">
                    {{l.name}}
                </router-link>
            </ul>
        </div>
    </div>
</template>

<script>
    
    export default{
        data(){
            return{
                list:[
                   {name:"首页",uri:"/"},
                   {name:"发布话题",uri:"/create"},
                   {name:"我的",uri:"/mine"},
                   {name:"退出登录",uri:"/login"}
                ],
                loginname:localStorage.getItem('loginname'),
                score:localStorage.getItem('score')
            }
        },
        methods:{
           
       }
    }
</script>

<style scoped>
    .side{
        width: 100%;
        height: 100%;
        position: fixed;
        padding-top: 60px;
        z-index: 1;
        background: #333;
    }
    img{
        width: 50px;
        height: 50px;
        border-radius: 50%;
        float: left;
        margin-left: 30px;
    }
    .img-right{
        float: left;
        color: #9a9a9a;
        font-size: 14px;
        margin: 8px 0 0 20px;
    }
    .money{
        margin-top: 2px;
        color: darkorange;
    }
    .side-menu ul{
        margin-top: 50px;
    }
    .side-menu ul li{
        height: 50px;
        border-bottom: 1px dotted #444;
        font-size: 14px;
        line-height: 50px;
        padding: 0 30px 0 20px;
        color: #9a9a9a;
    }
    
</style>

